@import "@styles/theme.scss";

.pay-result {
  position: relative;
  overflow: hidden;
  background: #f4f4f4;
  height: 100%;
}

.pay-result__info {
  background: #ffffff;
  align-items: center;
  display: flex;
  flex-direction: column;

  &-msg {
  	padding-top: 80px;
  	padding-bottom: 50px;
  	align-items: center;
  	display: flex;
  	flex-direction: column;

  	&-res {
  	  font-size: 40px;
  	  padding-bottom: 20px;
  	  color: $primary-color;
  	}

  	&-remark {
  	  font-size: 28px;
  	  color: #7f7f7f;
  	}
  }

  &-opt {
  	padding-bottom: 30px;
  	display: flex;
  	flex-direction: row;
  	background: #ffffff;

  	&-btn {
  	  display: flex;
      justify-content: center;
      align-items: center;
  	  width: 180px;
  	  height: 60px;
  	  border: 0;
  	  border-radius: 0;
  	  margin: 20px;
  	  border: 1px solid #333333;
  	  background-color: transparent;
    }

    &-txt {
  	  color: #333333;
  	  font-size: 30px;
    }

  }
} 

.pay-result__order {
  background: #ffffff;
  border-top: 7px dotted #f4f4f4;
  padding: 20px 25px 20px;

  &-row {
 	display: flex;
  	flex-direction: row;
  	align-items: left;
  }

  &-key {
  	font-size: 28px;
  	line-height: 40px;
  	width: 160px;
  }

  &-value {
  	font-size: 28px;
  	line-height: 40px;
  }

}

.pay-result__txt-primary {
  color: $primary-color;
}